<template>
    <div class="app-container">
        <U02Anim/>
        <!-- c3 entered with cid = {{$route.params.cid}} <br/>
             Project ID: {{ed.c.projectId}} <br />
             Project Name: {{ed.c.projectName}} <br />
             Selected Item: {{ed.itemId}} <br />
             Selected Item Payload: {{ed.c.L[ed.itemId].P.get(ed.payload) || "None"}} <br />
             Editing: {{U.ed_ing() ? "Yes" : "No"}} <br /> -->

        <el-container style="height: auto;">
            <el-aside width="50%" style="background-color: #44444400; line-height: 1em;padding:0;">
                <slot/>
                <el-text size="small" type="info"> 点击右侧任务链编辑/查看节点。 </el-text> <br/>
            </el-aside>
          <el-main style="padding:0; margin-left:1em;">
              <div style="text-align: right;" >
              </div>
              <div v-if="ed.c" class="A" style="margin-top: 1em;">
                <template v-if="ed.i0">
                    <div class="new-item">
                        {{ed.i0.color}} [New] {{U.text_short(ed.i0!.notes, 10)}}
                    </div>
                    <img :src="'/left-arrow.svg'" alt="Arrow Left" />
                </template>
                <template v-for="i in range(ed.c.L.length - 1, 0, -1)" :key="i">
                    <template v-if="!ed.c.L[i].grey">
                        <div @click="U.ed_selectItem(i)"
                             :class="{'to-be-deleted': ed.toBeDeleted.includes(i),
                                 'to-be-greened': !ed.c.L[i].green,
                                 'selected': (ed.itemId === i && !U.ed_ing())
                             }"
                             style="position: relative;" >
                            <span style="position: absolute; top: -5px; right: -10px;" v-if="ed.toBeDeleted.includes(i)">🗑️</span>
                            <span style="position: absolute; top: -5px; right: -10px;" v-if="ed.c.L[i].new0">✨ </span>

                            <U09blinkingCircle :color="ed.c.L[i].color" :n="10" />
                            <el-text style="vertical-align: middle; margin-left: 0.2em;">
                                {{U.text_short(ed.c.L[i].notesD)}}
                            </el-text>
                        </div>
                        <!-- <img src="/left-arrow.svg" alt="Arrow Left" /> -->
                    <img :src="'/left-arrow.svg'" alt="Arrow Left" />
                    </template>
                </template>
            </div>
          </el-main>
      </el-container>
        <template v-if="ed.c">
            <el-container style="height: 75vh;">
                <el-aside width="200px">
                    <div @click="U.s06_selectLog()"
                         :class="['sidebar-item', {'sidebar-item-selected': U.s05_logSelected()}]"
                         style="font-weight: bold;">
                        RUN-LOG
                    </div>

                    <div v-for="(kv, index) in U.I0().P" :key="index" 
                         @click="U.ed_selectPayload(kv[0])"
                         :class="['sidebar-item', {'sidebar-item-selected': ed.payload === kv[0]}]">
                        {{kv[0]}}
                    </div>

                </el-aside>
                <el-main>
                    <div class="form-section">
                        <div class="item-info">
                            <div>
                                <span class="label">Item Class:</span>
                                <U09blinkingCircle :color="U.I0().color" :n="15" />
                                <span class="value" style="margin-left: .3em;">
                                    {{U.I0().klass}}
                                </span>
                            </div>
                            <el-text size="small" style="text-align: right"> {{U.s08_getApproveMsg()}}
                                <el-popover v-if="U.s08_getApproveMsg() !== ''"
                placement="right" width="320">
                <template #reference>
                    <el-icon><InfoFilled /></el-icon>
                </template>
                <div style="padding: 0px;">
                    <el-text type="primary" style="font-weight: 600;">指标说明：</el-text>
                    <br/><br/>
                    <el-text size="small">a = 最新产物行数</el-text><br/>
                    <el-text size="small">b = 上一版本行数</el-text><br/>
                    <el-text size="small">c = 当前版本与上一版本中共同的行数</el-text><br/>
                    <br/>
                    <el-text size="small" type="success">采纳率 = c / a × 100%</el-text><br/>
                    <el-text size="small" type="warning">通过率 = c / b × 100%</el-text>
                </div>
            </el-popover>
                            </el-text>
                        </div>
                        <template v-if="U.s05_logSelected()">
                            <div class="lg">
                                <div v-for="i in U.I0().logsL" class="ln">
                                    <span class="ts">{{i.t}}</span>
                                    <span class="ic">📗️</span>
                                    <!-- <U05MD :markdownContent="i.s" /> -->
                                    <!-- 🦜 : I just realize that the markdown is not that easy on the eye... -->
                                    <span style="white-space: pre-wrap;word-wrap: break-word;" >{{i.s}}</span>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="input-group">
                                <label class="input-label">Note:</label>
                                <el-input v-model="ed.note"
                                          :disabled="!U.ed_ing()"
                                          placeholder="Add a note..." 
                                          :suffix-icon="Notebook" />
                            </div>
                            
                            <div class="input-group">
                                <label class="input-label">Content:

                            <el-button @click="U.s07_copyIt()" size="small" :icon="CopyDocument" circle/>
                                </label>
                                <!-- <el-input v-model="ed.text" :disabled="!U.ed_ing()" :rows="4" type="textarea" placeholder="Please input" /> -->
                                <U08MagicEditor :kind="ed.payload" :disabled="!U.ed_ing()"  v-model:text="ed.text" />
                                <!-- 📗️ Here text: {{ ed.text }} -->
                            </div>
                            <transition name="error-fade">
                                <div class="vd-error" v-if="ed.err">
                                    <el-icon class="error-icon"><Warning /></el-icon>
                                    <span class="error-text">{{ed.err}}</span>
                                </div>
                            </transition>

                            <template v-if="!U.ed_ing()">
                                <template v-if="P0.edit">
                                <el-button @click="U.ed_startEd">编辑</el-button>
                                <el-button v-if="ed.toBeDeleted.includes(ed.itemId)"
                                           @click="U.ed_unmarkDelete"
                                >
                                    <!-- UnMark as To-Delete -->
                                    取消删除标记
                                    ⚙️</el-button>
                                <el-button v-else @click="U.ed_markDelete"
                                           style="margin-right: 12px;"
                                           type="danger">
                                    <template v-if="ed.c.L[ed.itemId].new0">
                                        <!-- Remove -->
                                        删除
                                    </template>
                                    <template v-else>
                                        <!-- Mark as To-Delete -->
                                        标记为删除
                                    </template>
                                </el-button>
                                </template>
                                <U04DropInput v-model:n="ed.s02_n"
                                              v-model:isOpen="ed.s04_isOpenN"
                                              :bad_msg="ed.s03_badMsg" @submit="U.s02_submitT" @cancel="U.s03_cancelT"></U04DropInput>
                                <el-button type="success" @click="U.approve_all_and_quit" v-if="P0.edit">
                                    <!-- Approve and Quit -->
                                    批准并保存
                                </el-button>
                                <el-button @click="U.quit">
                                    <!-- Quit -->
                                    退出
                                </el-button>
                            </template>

                            <template v-else>
                                <el-button @click="U.ed_cancelEd">Cancel</el-button>
                                <el-button type="primary" @click="U.ed_saveEd">Save</el-button>
                                <U03DropSelect v-model:isOpen="ed.s00_isOpen">
                                    <div v-for="(kv, i) in aaa.M" :key="kv[0]" class="dropdown-item" :class="{ 'is-selected': ed.s02_n === kv[0] }"
                                         @click="U.s00_selectT(kv[0])">
                                        <span class="item-label">{{ kv[0] }} {{kv[1].color}}</span>
                                        <el-icon class="delete-icon"
                                                 @click.stop="U.s01_deleteT(kv[0])">
                                            <Close />
                                        </el-icon>
                                    </div>
                                </U03DropSelect>
                            </template>
                        </template>
                    </div>
                </el-main>
            </el-container>
        </template>
    </div>
</template>

<script setup lang="ts">
 import { onUnmounted, watch, ref, onMounted, markRaw, reactive} from 'vue';
 import { CopyDocument, Close, Search, Edit, Download, Calendar, Notebook,Warning, InfoFilled} from '@element-plus/icons-vue';
 import { parseTime } from '@/utils';
 import { U2 } from '@/utils/u';
 import useUserStore from '@/store/modules/user'
 import U02Anim from '@/components/U02Anim.vue';
 import { useRouter } from 'vue-router';
 import { ElLoading} from 'element-plus'
 const U1 = useUserStore();
 import U03DropSelect from '@/components/U03DropSelect.vue';
 import U04DropInput from '@/components/U04DropInput.vue';
 import U05MD from '@/components/U05MD.vue';
 import U08MagicEditor from '@/components/U08MagicEditor.vue';
 import U09blinkingCircle from '@/components/U09blinkingCircle.vue';


const P0 = defineProps({edit: Boolean});

import { useAaaStore, ChainItem, TChain, W, r03pauseChain, r04resumeChain, r05getChainById, r06postChain} from '@/api/hi_api';


const router = useRouter();
const aaa = useAaaStore();
const ed = reactive({
    itemId: 0,
    payload: "", // default payload to show,
    // ing: false, // is the editor currently processing something?

    err: "", // error message, if any
    i0  : null as ChainItem | null, // initial item copy for editing
    note : "",
    text : "No payload selected",
    c: null as TChain | null, // the current chain
    loading: false, // is the chain loading?
    toBeDeleted: [], // items to be deleted
    // 🦜 : remember the sementics: green = viewed, grey = deleted


    // --------------------------------------------------
    s00_isOpen : false, // is the dropdown open?
    s01_l : [
        { label: "k1", value: "v1" },
        { label: "k2", value: "v2" },
        { label: "k3", value: "v3" },
    ],
    s02_n : '',// template name
    s03_badMsg: '', // error message for the template name
    s04_isOpenN : false,// name input dropdown
    s05_graceful: false
});

const cid = router.currentRoute.value.params.cid as string;
onMounted(async () => {
    U.start_loading("Initializing");
    try {
        let o = await r05getChainById(cid);
        if (!o || !o.data) {// 🦜 : backend returns null
            throw new Error("Current chain is being edited by someone else, please try again later.");
        }
        ed.c = o.data;
        ed.itemId = ed.c.L.length -1;
        U.stop_loading();
    } catch (e) {
        console.error("Error fetching chain:", e);
        ElNotification({
            title: 'Error',
            message: 'Failed to fetch chain. Please try again later.',
            type: 'error',
        });
        U.stop_loading();
        router.back();
    }
});
onUnmounted(async () => {
     console.log("👋 Unmounted c3.vue, cleaning up...");
     if (!ed.s05_graceful){
         console.log("⚙️ Ungraceful shutdown detected: resume and go back");
         await r04resumeChain(cid);
     }
});

class U{
    static I0(){
        // return the current item
        if (ed.i0) return ed.i0;
        return ed.c.L[ed.itemId];
    }
    static s00_selectT(v: string){// select template
        console.log("Selected item:", v);
        ed.s00_isOpen = false; // close the dropdown

        if (!aaa.M.has(v)) {
            ed.s03_badMsg = `Template "${v}" does not exist.`;
            console.error(ed.s03_badMsg);
            ElNotification({
                title: 'Error',
                message: ed.s03_badMsg,
                type: 'error',
            });
            return;
        }else{
            // i0 = aaa.M.get(v)!; // get the template item
            ed.i0 = ChainItem.Copy(aaa.M.get(v)!); // copy the template item
            console.log("Template item copied:", ed.i0);
            ElNotification({
                title: 'Success',
                message: `Template "${v}" applied successfully!`,
                type: 'success',
            });
            U.s04_updateText();
        }
    }
    static s01_deleteT(v: string) {// delete template
        console.log("Deleting item:", v);
        aaa.del(v);
        ElNotification({
            title: 'Success',
            message: `Template "${v}" deleted successfully!`,
            type: 'success',
        });
    }
    static s02_submitT(n: string){
        console.log("Submitting template name:", n);
        aaa.add(n, ed.c.L[ed.itemId]);
        ElNotification({
            title: 'Success',
            message: `Template "${n}" added successfully!`,
            type: 'success',
        });
        U.s03_cancelT(); // close the dropdown and reset the name
    }
    static s03_cancelT() {
        ed.s04_isOpenN = false; // close the dropdown
        ed.s02_n = ''; // reset the name
        ed.s03_badMsg = ''; // reset the error message
    }
    static s04_updateText(){
        // update the text based on the current payload
        if (ed.i0 && ed.payload) {
            ed.text = ed.i0.P.get(ed.payload) || `<Error getting payload ${ed.payload}>`;
            ed.note = ed.i0.notes || "";
            ed.payload = ed.i0.P.keys().next().value || ""; // select the first payload
        } else {
            ed.text = "No payload selected";
        }
    }

    static s05_logSelected(): boolean {
        return ed.payload === "<LOGS>";
    }
    static s06_selectLog() {
        ed.payload = "<LOGS>";
    }
     static s07_copyIt() {// 🦜 : ai-generated
         // copy the current text to clipboard with fallback for older browsers
         if (navigator.clipboard && navigator.clipboard.writeText) {
             // Modern API - works in newer browsers with HTTPS
             navigator.clipboard.writeText(ed.text).then(() => {
                 ElNotification({
                     title: 'Success',
                     message: 'Text copied to clipboard!',
                     type: 'success',
                 });
             }).catch(err => {
                 console.error('Failed to copy text: ', err);
                 U.s07_fallbackCopy(ed.text);
             });
         } else {
             // Fallback for older browsers
             U.s07_fallbackCopy(ed.text);
         }
     }

     static s07_fallbackCopy(text: string) {
         try {
             // Create a temporary textarea element
             const textarea = document.createElement('textarea');
             textarea.value = text;
             textarea.style.position = 'fixed';
             textarea.style.opacity = '0';
             textarea.style.top = '-9999px';
             textarea.style.left = '-9999px';
             
             document.body.appendChild(textarea);
             textarea.focus();
             textarea.select();
             
             // Use the older execCommand API
             const successful = document.execCommand('copy');
             document.body.removeChild(textarea);
             
             if (successful) {
                 ElNotification({
                     title: 'Success',
                     message: 'Text copied to clipboard!',
                     type: 'success',
                 });
             } else {
                 throw new Error('execCommand copy failed');
             }
         } catch (err) {
             console.error('Failed to copy text: ', err);
             ElNotification({
                 title: 'Error',
                 message: 'Failed to copy text to clipboard. Please copy manually.',
                 type: 'error',
             });
         }
     }

     static s08_getApproveMsg(){
         let klass = ed.c.L[ed.itemId].klass;
         return ed.c.getApprovedRateDZh(klass, ed.payload);
     }

    static start_loading(s: string = "Loading") {ed.loading = U2.start_loading(s);}
    static stop_loading() {ed.loading = U2.stop_loading();}
    static async approve_all_and_quit(){
        /* 🦜 : here we
           1. for each item, apply the new0 flag and drop the new0 field
           2. apply greened to all (that's not greened)
           3. apply apply greyed to those marked
           3.1 <2025-08-14 Thu> apply grey to those who has a newer version
           4. post the chain
           5. quit()
         */
        U.start_loading("📗️Compiling and Uploading");
        for (let i = 0; i < ed.c.L.length; i++) {
            const x = ed.c.L[i];
            if (x.new0) x.add_new0_F();
            if (!x.green && !x.grey) x.add_greened_F();
            if (ed.toBeDeleted.includes(i)) x.add_greyed_F();
            // 3.1
            let L1 = ed.c.L.filter((y,j) => (j > i) && (y.klass === x.klass) && (!y.grey));
            if (L1.length > 0) {
                console.log(`🚮️ Item ${i} (${x.klass}) is greyed because of item`, L1[0]);
                x.add_greyed_F();
            }
        }
        ed.err = ed.c.verify();
        if (ed.err.length > 0) {
            ElNotification({
                title: 'Error',
                message: `Chain verification failed: ${ed.err}`,
                type: 'error',
            });
            U.stop_loading();
            return;
        }
        console.log("Posting chain:", ed.c);
        try{
            await r06postChain(ed.c);
            console.log("Chain posted successfully");
        } finally {
            U.stop_loading();
        }
        ed.s05_graceful = true; // mark it as graceful exit
        router.back();
    }
    // static quit = () => console.log("👋 bye bye");
    static async quit() {
        U.start_loading("Trying to resume and go back");
        await r04resumeChain(cid);
        U.stop_loading();

        ed.s05_graceful = true; // mark it as graceful exit
        router.back();
    }
    static ed_ing(): boolean {
        return ed.i0 !== null;
    }
    static text_short(text: string, maxLength: number = 20): string {
        if (text.length <= maxLength) return text;
        return text.slice(0, maxLength) + "...";
    }
    static ed_unmarkDelete() {
        // remove itemId from toBeDeleted
        console.log("Now, items to be deleted:", ed.toBeDeleted);
        const i = ed.toBeDeleted.indexOf(ed.itemId);
        console.log(`Item to be deleted is ${ed.itemId}, index is ${i}`);
        if (i > -1) {
            delete ed.toBeDeleted[i];
        }
        console.log("Now, items to be deleted:", ed.toBeDeleted);
    }
    static ed_markDelete() {
        // 1 if it's a new item, just remove it
        let i1 = ed.c.L[ed.itemId];
        if (i1.new0) {
            console.log("Item is new, just removing it from the list.");
            ed.c.L.splice(ed.itemId, 1); // remove the item from the list
            U.ed_selectItem(ed.c.L.length - 1); // select the last item
            return;
        }
        
        // 2. add itemId to toBeDeleted
        if (!ed.toBeDeleted.includes(ed.itemId)) {
            ed.toBeDeleted.push(ed.itemId);
        }
        console.log("Marked item for deletion:", ed.itemId);
        console.log("Now, items to be deleted:", ed.toBeDeleted);
    }
    static ed_selectPayload(payload: string) {
        if (payload === "" || payload === ed.payload) {
            return;
        }
        // stash the current payload into ed.i0 before changing it
        if (U.ed_ing() && (ed.payload != '<LOGS>')) {
            ed.i0!.P.set(ed.payload, ed.text);
            console.log(`Stashed payload ${ed.payload} with text: ${ed.text}`);
        }
        ed.payload = payload;
        if (!U.ed_ing()) {
            // if not editing, just show the payload
            ed.text = ed.c.L[ed.itemId].P.get(payload) || "";
            return;
        }else{
            ed.text = ed.i0!.P.get(payload) || "";
        }
    }
    static ed_selectItem(itemId: number) {
        if (U.ed_ing()){
            ElNotification({
                title: 'Error',
                message: 'Please finish or cancel the current editing before selecting another item.',
                type: 'error',
            });
            return;
        }
        console.log(`Selecting item `, ed.c.L[itemId]);
        ed.itemId = itemId;
        // Object.assign({}, ed.c.L[itemId]); // copy item
        ed.note = ed.c.L[itemId].notes || "";
        ed.payload = ed.c.L[itemId].P.keys().next().value || ""; // select the first payload
        ed.text = ed.c.L[itemId].P.get(ed.payload) || "";
    }

    static ed_startEd() {// start editing
        /*
           0. copy the current item to ed.i0
           1. set U.ed_ing() = true
         */
        ed.i0 = new ChainItem(); // tmp item
        const i1 = ed.c.L[ed.itemId];// a pointer
        ed.i0.klass = i1.klass; // copy the klass
        ed.i0.notes = i1.notes || ""; // copy the notes
        ed.i0.P = new Map(i1.P);
        // a shallow copy of the P is enough, cuz it's str:str
        /*
           🦜 : Now, every-time we selectPayload (change selectedPayload), we
           save the current payload into i0:
         */
        console.log(`Starting editing item ${ed.itemId} with i0:`, ed.i0);
    }
    static ed_cancelEd() {// cancel editing
        /*
           0. reset ed.i0
           1. reset U.ed_ing() to false
         */
        if (!U.ed_ing()) return;
        ed.i0 = null; // reset i0
    }
    static ed_saveEd() {
        // 0. apply ed.statusChange, add the new0 flag before pushing it to the chain
        console.log("Saving the current item...");
        if (!U.ed_ing()) throw new Error("Not in editing mode");
        const i0 = ed.i0;
        if (!i0) throw new Error("No item to save");
        i0.new0 = true; // mark it as a new item
        i0.notes = ed.note; // update notes
        // 1. save the current payload into i0
        i0.P.set(ed.payload, ed.text);
        // 2. push the new item to the chain
        ed.c.L.push(i0);
        // 3. reset ed.i0 and U.ed_ing()
        U.ed_cancelEd();
    }
};
function range(start, end, step = 1) {
    return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step);
}
</script>


<style lang="scss" scoped>
@mixin light-bg-hover {
    &:hover {
        background-color: var(--el-color-primary-light-8);
        cursor: pointer;
    }
}
.el-container {
    background-color: #f0f2f533;

    height: 50vh;
    .el-main {
        background-color: var(--el-color-grey-1);
        .form-section {
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;

            .item-info {
                margin-bottom: 20px;
                padding: 12px 16px;
                background: var(--el-color-primary-light-9);
                /* border-radius: 2px; */
                border-left: 4px solid var(--el-color-primary);
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .label {
                    font-weight: 600;
                    color: var(--el-text-color-primary);
                    margin-right: 8px;
                }
                .value {
                    color: var(--el-color-primary);
                    font-weight: 500;
                }
            }
            
            .input-group {
                margin-bottom: 16px;
                
                .input-label {
                    display: block;
                    margin-bottom: 6px;
                    font-weight: 500;
                    color: var(--el-text-color-regular);
                    font-size: 14px;
                }
                
                .el-input, .el-textarea {
                    transition: all 0.2s ease;
                    
                    &:focus-within {
                        transform: translateY(-1px);
                        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
                    }
                }
            }
        }
    }
    .el-aside {
        background-color: #f7f8fa;
        border-right: 1px solid #e4e7ed;
        
        .sidebar-item {
            padding: 12px 12px 12px 20px;
            border-bottom: 1px solid #ebeef5;
            position: relative;
            transition: all 0.2s ease;
            color: #606266;
            
            &:hover:not(.sidebar-item-selected) {
                background-color: #f0f2f5;
                cursor: pointer;
            }
            
            &.sidebar-item-selected {
                background-color: #ffffff;
                color: var(--el-color-primary);
                font-weight: 500;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 3px;
                    background-color: var(--el-color-primary);
                }
            }
            
            &:first-child {
                font-weight: 600;
                text-transform: uppercase;
                font-size: 12px;
                letter-spacing: 0.5px;
                color: #909399;
                padding-top: 16px;
                padding-bottom: 16px;
                
                &.sidebar-item-selected {
                    color: var(--el-color-primary);
                }
            }
        }
    }
}

@mixin center-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.A {
    display: flex;
    gap: 10px;
    background-color: #00000022;
    padding: 10px;
    max-width: 700px;
    overflow-x: scroll;
    border-radius: 10px;


    div {
        background-color: #f0f0f0;
        padding: 8px;
        /* border: 1px solid #ccc; */
        height: 60px;
        min-width: 120px; /* Hi, it seems like min-width works but width doesn't ... why? */
        @include center-text;
        border-radius: 10px;
        box-sizing: border-box;
        @include light-bg-hover;
    }
    @mixin shiny-border {
        border: 4px solid var(--el-color-primary);
    }
    @mixin shiny-bg {
        background-color: var(--el-color-primary-light-9);
    }
    .to-be-greened {
        background-color: var(--el-color-success-light-9);
    }
    .new-item {
        @include shiny-bg;
        @include shiny-border;
    }
    .selected {
        @include shiny-border;
    }
    .to-be-deleted {
        color: grey;
    }

    img {
        width: 24px;
    }
}

// Log styles
.lg {
    max-height: 400px;
    overflow-y: auto;
    background: var(--el-color-info-light-9);
    border-radius: 6px;
    padding: 12px;
    
    .ln {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0;
        border-bottom: 1px solid var(--el-color-info-light-8);
        
        &:last-child {
            border-bottom: none;
        }
        
        .ts {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            font-family: monospace;
            margin-bottom: 4px;
        }
        
        .ic {
            display: none;
        }
    }
}
</style>
